<template>
  <div class="bg">
    <div class="commonBox">
      <!-- <div class="goods">
        <div class="imgBox">
          <img :src="`${resourceURL}${detail[0]?.cover_url}`" alt="" />

        </div>
        <div class="text">
          <div class="name">{{detail[0]?.product_name}}</div>
          <div class="price">￥{{detail[0]?.amount}}/份</div>
        </div>
      </div> -->
      <div class="Box" v-if="this.$route.query.type">

        <div class="Box_top">
          <div class="image">
            <van-image :src="`${resourceURL}${order.top_pic}`" />
          </div>
          <div class="right">
            <div class="top">
              <div class="name">{{order.service_name}}</div>
              <div class="status">{{order.state==3?"已完成":"已预约"}}</div>
            </div>
            <div class="center">{{formatCreateTime(order.make_time)}}</div>
            <div class="price">
              <span style="font-weight:400">已付订金</span> ￥{{order.pay_amount}}
            </div>
          </div>

        </div>

      </div>

      <div v-if="!this.$route.query.type">
        <van-card :num="item.quantity" :price="item.mprice" :desc="item.p_s_name" :title="item.product_name" :thumb="`${resourceURL}${item.cover_url}`" v-for="(item,index) in detail" :key="index" />
      </div>
      <div class="line"></div>
      <van-field v-model="content" placeholder="可以从多个角度评价宝贝，可以帮助更多人" type="textarea" maxlength="80" show-word-limit />
      <van-uploader v-model="imgList" :after-read="updateUserImg" :max-size="3145728" accept=".jpg,.png" @oversize="onOversize" @delete="deleteImage" :max-count="3" style="margin-top: 12px;" />
    </div>
    <div class="button">
      <van-button type="primary" round :disabled="!content" @click="usercomment">提交评价</van-button>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data () {
    return {
      order: {},
      detail: {},

      imgList: [],
      image: [],
      content: ""
    }
  },
  computed: {

  },
  watch: {

  },
  mounted () {

  },
  created () {

    if (this.$route.query.type) {
      this.orderserviceinfo()
    } else {
      this.getorderdetail()
    }
  },
  methods: {
    //时间转化
    formatCreateTime (val) {
      return this.$moment(val).calendar(null, {
        sameDay: "MM月DD日 [今天] HH:mm:ss",
        nextDay: "MM月DD日 [明天] HH:mm:ss",
        nextWeek: "MM月DD日  HH:mm:ss",
        lastDay: "MM月DD日 [昨天] HH:mm:ss",
        lastWeek: "MM月DD日  HH:mm:ss",
      });
    },
    //获取家政订单细节
    orderserviceinfo () {
      this.$axios
        .get(this.$api.orderserviceinfo, {
          params: {
            send_id: this.$route.query.send_id
          },
        })
        .then((res) => {
          this.order = res.data.data[0]

        });
    },
    //获取普通订单细节
    getorderdetail () {

      this.$axios
        .get(this.$api.getorderdetail, {
          params: {
            order_id: this.$route.query.order_id
          },
        })
        .then((res) => {

          this.detail = res.data.data.productinfo[0].detailinfo
          this.order = res.data.data.order

        });
    },
    //限制上传文件大小
    onOversize () {

      Toast('文件大小不能超过 1m');
    },
    //上传
    updateUserImg (file) {

      let formData = new FormData();
      formData.append("image", file.file);
      formData.append("type_name", 'comment');

      this.$axios.post(this.$api.uploadshopimage, formData).then((res) => {

        this.image.push(
          res.data.data.file_path
        )
      })

    },
    //删除图片
    deleteImage (file, detail) {

      this.image.splice(detail.index, 1)
    },
    //评论
    usercomment () {

      let form = {
        order_id: this.$route.query.order_id,
        content: this.content,
        images: [...this.image],
        handle: "submit"
      }
      let url = this.$api.usercomment
      if (this.$route.query.type) {
        url = this.$api.iscomment
      } else {
        form.detail_id = this.detail[0].detail_id
      }

      this.$axios.post(url, {
        ...form
      }).then((res) => {
        if (res.data.code == 1) {
          this.$store.commit('setImage', this.image)
          this.$store.commit('setContent', this.content)
          Toast.success(res.data.msg)
          this.jump()
        } else {

          Toast.fail(res.data.msg)
        }
      })

    },
    //跳去评论成功页
    jump () {


      this.$router.replace({
        name: 'commentStatus',
        query: {
          order_id: this.$route.query.order_id,
          type: this.$route.query.type
        }
      })
    }
  }

};
</script>
<style lang='less' scoped>
.bg {
  background: #f8f8f8;
  min-height: 100vh;
}
/deep/ .van-card {
  background-color: white;
}
.Box {
  width: 343px;

  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;

  padding: 16px;
  padding-bottom: 0px;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: -16px;
  margin-left: -16px;
  /deep/ .van-image {
    width: 100px;
    height: 80px;
  }
  .Box_top {
    display: flex;
    .right {
      flex: 1;
      margin-left: 12px;
      .top {
        display: flex;
        justify-content: space-between;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        .name {
          font-size: 16px;

          font-weight: bold;
          color: #06021a;
        }
        .status {
          font-size: 14px;

          font-weight: 400;
          color: #ff7733;
        }
      }
      .center {
        font-size: 14px;
        margin-top: 12px;
        font-weight: 400;
        color: #303030;
      }
    }
    .price {
      margin-top: 6px;
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #06021a;
    }
  }
}
.commonBox {
  margin: 12px 16px 60px;

  padding: 0 16px;
  padding-top: 12px;
  width: 343px;

  background: #ffffff;
  border: 1px solid #f2f2f2;
  opacity: 1;
  border-radius: 10px;
  box-sizing: border-box;
  .goods {
    width: 311px;
    height: 72px;
    display: flex;
    box-sizing: border-box;
    border-bottom: 1px dashed rgba(25, 23, 20, 0.102);
    .imgBox {
      width: 60px;
      height: 60px;
      border-radius: 10px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      margin-left: 20px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;

      color: #303030;

      .price {
        margin-top: 24px;
      }
    }
  }
}
.line {
  height: 1px;
  margin-top: 12px;
  border-top: 1px dashed transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    repeating-linear-gradient(
      -45deg,
      rgba(25, 23, 20, 0.1) 0,
      rgba(25, 23, 20, 0.2) 0.3em,
      #fff 0,
      #fff 0.6em
    );
}
/deep/textarea {
  height: 120px;
}
.van-cell {
  padding: 0;
  padding-top: 16px;
}
/deep/.van-field__word-limit {
  text-align: left;
}
.button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0px;
  background-color: white;
  height: 56px;
}
button {
  width: 343px;
  height: 44px;
  background: #ff7733 100%;
  border: 1px solid #ff7733;
}
</style>